<template>
	<view class="left-content">
		<view class="author">
			@{{item.author}}
		</view>
		<view class="title">
			{{item.title}}
		</view>
		<view class="music_box">
			<view class="music">
				@月光下翩翩起舞@月光下翩翩起舞
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['item'],
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.left-content {
		margin-left:10px;
		color: #ffffff;
		width: 120px;
		.author{
			height: 35px;
			line-height: 35px;
			font-size: 15px;
		}
		.music_box{
			width: 100px;
			overflow: hidden;
			.music{
				font-size: 12px;
				line-height: 35px;
				width: 200px;
				white-space:nowrap;
				animation: music 8s linear 0.2s infinite;
			}
		}
		.title{
			line-height: 22px;
			font-size: 12px;
		}
	}
	
	@keyframes music{
		0%{
			transform: translate3d(80%,0,0);
		},
		100%{
			transform: translate3d(-80%,0,0);
		}
	}
</style>
